<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字展融效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 500px;
      height: 500px;
      margin: 100px auto;
      /* 网关布局 */
      display: grid;
      /* 设置多少行，多少列 */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, lfr);
      /* 设置网格的布局方式 */
      grid-template: 
      'A A B'
      'C D B'
      'C E E';
      /* 设置空隙 */
      gap: 10px;  
    }
    .item {
      overflow: hidden;
      border: 1px slid #f00;
    }
    .item:nth-child(1) {
      /* 告诉网格当前节点属于谁 */
      grid-area: A; 
    }
    .item:nth-child(2) {
      grid-area: B; 
    }
    .item:nth-child(3) {
      grid-area: C; 
    }
    .item:nth-child(4) {
      grid-area: D; 
    }
    .item:nth-child(5) {
      grid-area: E; 
    }
    img {
      width: 260%;
      height: 260%;
      object-fit: cover;
    }
    /* 设置旋转 */
    .container {
      --r: -360deg;  /* 定义变量 */
      animation: rotatio 10s linear infinite;
    }
    .item img {
      --r: 360deg;
      animation: rotatio 10s linear infinite;
    }
    .item {
      display: flex ; 
      justify-content: center;
      align-items: center;
    }
    @keyframes rotatio {
      to {
        transform: rotate(var(--r));
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"><img src="./img/01.jpg" alt="" ></div>
    <div class="item"><img src="./img/02.jpg" alt="" ></div>
    <div class="item"><img src="./img/03.jpg" alt="" ></div>
    <div class="item"><img src="./img/04.jpg" alt="" ></div>
    <div class="item"><img src="./img/01.jpg" alt="" ></div>
  </div>
</body>
</html>